import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';

let data: any = [];
const data1 = [
  {
    type: '研一',
    value: 12,
  },
  {
    type: '研二',
    value: 13,
  },
  {
    type: '研三',
    value: 11,
  },
  {
    type: '延期',
    value: 1,
  },
];
const data2 = [
  {
    type: '博一',
    value: 3,
  },
  {
    type: '博二',
    value: 4,
  },
  {
    type: '博三',
    value: 4,
  },
  {
    type: '博四',
    value: 5,
  },
  {
    type: '延期',
    value: 2,
  },
];
const data3 = [
  {
    type: '一年级',
    value: 1,
  },
  {
    type: '二年级',
    value: 2,
  },
  {
    type: '三年级',
    value: 2,
  },
  {
    type: '延期',
    value: 1,
  },
];
const DemoPie = ({ type }: any) => {
  if (type === '1') {
    data = data1;
  } else if (type === '2') {
    data = data2;
  } else {
    data = data3;
  }
  const config = {
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.7,
    legend: false,
    label: false,
    // statistic: false,
    tooltip: false,
    interactions: [
      {
        type: 'pie-statistic-active',
      },
    ],
    statistic: {
      title: {
        offsetY: -4,
        customHtml: (_: any, __: any, datum: any) => {
          const text = datum ? datum.type : '总计';
          return <span style={{ fontSize: 12 }}>{text}</span>;
        },
      },
      content: {
        style: {
          fontSize: 8,
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        },
        customHtml: (_: any, __: any, datum: any, data: any) => {
          const text = datum
            ? `${datum.value} 个`
            : `${data.reduce((r, d) => r + d.value, 0)} 个`;
          return <span style={{ fontSize: 12 }}>{text}</span>;
        },
      },
    },
    style: {
      height: 75,
      width: 75,
      marginTop: 4,
    },
  };
  return <>{type ? <Pie {...config} data={data} /> : null}</>;
};

export default DemoPie;
